<template>
  <div class="shopQ">
    <div style="height: 35px">
      <FHeader :username="username" :collectNum="collectNum"></FHeader>
    </div>
    <div class="shopCom" style="margin-top: 30px">
      <el-row>
        <el-col :span="6" :offset="4">
          <el-carousel style="border: 1px solid #d3dce6" height="350px">
            <el-carousel-item v-for="(item,index) in list" :key="index">
              <img :src="item.image" style="width: 100%;height: 350px"/>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="7" :offset="1">
          <div class="title">
            {{ shopSign.title }}
          </div>
          <div>
            <el-tag type="danger">{{ shopSign.lity.listType }}成新</el-tag>
          </div>
          <div class="shoppL flex-sbc">
            <div class="left">
              <div class="shopPrice">
                <span class="price1">￥</span>
                <span class="price2">{{ shopSign.price }}</span>
                <span class="price3">￥{{ shopSign.original }}</span>
              </div>
            </div>
            <div class="right">
              浏览：{{ shopSign.shopLook }}
            </div>
          </div>
          <div style="margin-top: 15px">
            <el-button type="danger" plain @click="shopShow = true">立即购买</el-button>
            <el-button type="danger" icon="el-icon-shopping-cart-2" @click="collectClick()">加入购物车</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 15px">
      <el-row>
        <el-col :span="14" :offset="4">
          <el-tabs type="border-card">
            <el-tab-pane label="商品详情">
              <div v-html="shopSign.content"></div>
            </el-tab-pane>
            <el-tab-pane label="评论">
              <!--              <div v-if="commentList.length = 0">暂无评论</div>-->
              <div class="comment" v-for="(item,index) in commentList" :key="index">
                <div class="buyComment flex-sbc">
                  <div class="left flex-md">
                    <div>
                      <el-avatar :src="item.url"></el-avatar>
                    </div>
                    <div style="margin-left: 10px">
                      <div>{{ item.name }}</div>
                    </div>
                  </div>
                  <div class="right">
                    评论时间：{{ item.date }}
                  </div>
                </div>
                <div class="contentComment">
                  {{ item.contentText }}
                </div>
                <div v-if="item.replyList.length >0">
                  <div class="shangCommnet" v-for="(res,index1) in item.replyList" :key="index1">
                    <div class="flex-sbc" style="color: #9b9b9b">
                      <div class="left flex-md">
                        <div>
                          <el-avatar :src="res.url"></el-avatar>
                        </div>
                        <div style="margin-left: 10px">
                          <div>{{ res.name }}</div>
                        </div>
                        <div style="margin-left: 3px">
                          <el-tag type="warning">商家</el-tag>
                        </div>
                      </div>
                      <div class="right">
                        回复时间：{{ res.date }}
                      </div>
                    </div>
                    <div class="contentComment">
                      {{ res.contentStr }}
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>

    <el-dialog title="购买商品信息" :visible.sync="shopShow" width="50%">
      <el-form :model="shopMess" label-width="70px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="shopMess.username"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="shopMess.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input type="textarea" v-model="shopMess.address" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="time">
          <el-input v-model="shopMess.time"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
              <el-button @click="shopShow = false">取 消</el-button>
              <el-button type="primary" @click="addOrder()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="商品购买成功" :visible.sync="messShow" width="50%">
      <div class="flex-ct" style="font-size: 30px">
        你已购买商品
        <span style="color: #FF6101;">{{ shopSign.title }}</span>,请带上
        <span style="color: #FF6101;">{{ shopSign.price }}</span>元于
        <span style="color: #FF6101;">{{ shopMess.time }}</span>到
        <span style="color: #FF6101;">{{ shopMess.address }}</span>取货。
      </div>
      <div class="flex-ct" style="margin-top: 10px">
        <el-progress type="circle" :percentage="vilTime"></el-progress>
      </div>
      <div class="flex-ct">
        <div class="flex-md">
          <span style="color: #FF6101;">{{times}}</span>
          后，跳转到</div>
        <el-button type="text" @click="homeClick()">首页</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FHeader from '@/components/FHeader';

export default {
  name: 'ShopXQ',
  components: {
    FHeader
  },
  data() {
    return {
      userId: '',
      username: '',
      list: [],
      shopSign: {
        lity: {
          listType: ''
        }
      },
      commentList: [],
      collectNum: 0,
      shopShow: false,
      shopMess: {
        address: '',
        username: '',
        phone: '',
        time: '明天上午12点'
      },
      messShow: false,
      times: 20,
      vilTime: 0
    };
  },
  created() {
    this.getUser();
    this.addShopLook();
    // this.getShop()
    this.getComment();
  },
  methods: {
    getUser() {
      let user = JSON.parse(window.sessionStorage.getItem('user') || null);
      if (user) {
        this.username = user.username;
        this.userId = user.id;
      }
    },
    async addShopLook() {
      let that = this;
      let id = that.$route.params.id;
      let dataId = {
        id: id
      };
      const { data: res } = await this.$http.post('shop/addShopLook', dataId);
      if (res.flag == '200') {
        this.getShop();
      }
    },
    async getShop() {
      let that = this;
      // console.log(that.$route.params.id)
      let id = that.$route.params.id;
      let dataId = {
        id: id
      };
      const { data: res } = await this.$http.get('shop/getShopSign?id=' + id);
      if (res.flag == '200') {
        let serve = res.shopSing;
        if (serve.shopUrl.indexOf('<<tupian>>') > 0) {
          serve.shopUrl = serve.shopUrl.split('<<tupian>>');
          serve.shopUrl.forEach(item => {
            let obj = {
              image: item
            };
            that.list.push(obj);
          });
        } else {
          let obj = {
            image: serve.shopUrl
          };
          that.list.push(obj);
        }
        that.shopSign = serve;
        that.lookCollect();
      }
    },
    async getComment() {
      let that = this;
      // console.log(that.$route.params.id)
      let id = that.$route.params.id;
      let dataId = {
        shopId: id
      };
      const { data: res } = await this.$http.post('comment/getComment', dataId);
      if (res.flag == '200') {
        let serve = res.commentList;
        serve.forEach((item, index) => {
          if (!item.commentId) {
            item.creatTime = that.formatDateTime(item.creatTime);
            let obj = {
              id: item.id,
              name: item.user.username,
              date: item.creatTime,
              contentText: item.content,
              url: item.user.userUrl,
              allReply: 0,
              likeNum: 0,
              isLike: false,
              replyList: []
            };
            that.commentList.push(obj);
          }
        });
        serve.forEach((item, index) => {
          if (item.commentId) {
            item.creatTime = that.formatDateTime(item.creatTime);

            that.commentList.forEach((it, index1) => {
              if (it.id == item.commentId) {
                let obj = {
                  date: item.creatTime,
                  url: item.user.userUrl,
                  name: item.user.username,
                  contentStr: item.content
                };
                that.commentList[index1].replyList.push(obj);
                that.commentList[index1].allReply++;
              }
            });
          }
        });
      }
    },
    async collectClick() {
      let that = this;
      let dataId = {
        userId: that.userId,
        shopId: that.shopSign.id,
        type: 1
      };
      const { data: res } = await this.$http.post('collect/addCollect', dataId);
      if (res.flag == '200') {
        this.$message.success('成功加入购物车');
        this.lookCollect();
      } else {
        this.$message.error('加入购物车失败');
      }
    },
    async lookCollect() {
      let that = this;
      let dataId = {
        userId: that.userId,
        shopId: that.shopSign.id,
        type: 1
      };
      const { data: res } = await this.$http.post('collect/lookCollect', dataId);
      if (res.flag == '200') {
        that.collectNum = res.collectNum;
      }
    },
    async addOrder() {
      let that = this;
      let user = JSON.parse(window.sessionStorage.getItem('user') || null);
      let dataId = {
        userId: user.id,
        shopId: that.shopSign.id,
        name: that.shopMess.username,
        phone: that.shopMess.phone,
        address: that.shopMess.address,
        time: that.shopMess.time,
        orderType: 1,
        sellerId: that.shopSign.userId
      };
      const { data: res } = await this.$http.post('order/addOrder', dataId);
      if (res.flag == '200') {
        that.shopShow = false;
        that.messShow = true;
        that.timeChin()
      }
    },
    timeChin() {
      let that = this;
      if (that.messShow == true) {
        this.timer = setInterval(() => {
          this.times--;
          this.vilTime += 5;
          if (this.times === 0) {
            this.show = true;
            clearInterval(this.timer);
            this.$router.push('../front/Home')
          }
        }, 1000);
      }
    },
    homeClick(){
      this.$router.push('../front/Home')
    }
  },
  watch: {
    '$$router': 'getShop',
    messShow: function () {
      let that = this
      if(that.messShow == false){
        clearInterval(this.timer);
      }else{
        this.timeChin();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.shopQ {
  .shopCom {
    .title {
      padding-bottom: 15px;
      line-height: 1;
      font-size: 16px;
      font-weight: 700;
      color: #000;
    }

    .shoppL {
      .left {
        .shopPrice {
          font-size: 18px;
          margin-top: 5px;

          .price1 {
            vertical-align: baseline;
            font-family: PingFangSC-Medium;
            font-size: 24px;
            color: #fd3f31;
          }

          .price2 {
            margin-left: 4px;
            vertical-align: baseline;
            text-align: left;
            line-height: 25px;
            font-family: PingFangSC-Medium;
            font-size: 24px;
            color: #fd3f31;
          }

          .price3 {
            margin-left: 8px;
            vertical-align: baseline;
            text-decoration: line-through;
            line-height: 20px;
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: #9b9b9b;
          }
        }
      }
    }
  }

  .comment {
    border-bottom: 1px solid #9b9b9b;
    padding-bottom: 15px;
    margin-bottom: 5px;

    .buyComment {
      color: #9b9b9b;
    }

    .contentComment {
      margin-top: 5px;
    }

    .shangCommnet {
      margin-top: 5px;
      margin-left: 45px;
      border-top: 1px solid #9b9b9b;
      padding-top: 5px;
    }
  }
}


.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
::v-deep .el-progress__text{
  display: none;
}
</style>
